<template>
	<!-- 车辆列表 -->
	<div class="content">
		<div class="content-top">
			车辆管理_车辆信息查询
		</div>
		<div class="content-operation">
			<el-button type="primary" icon="el-icon-plus" @click='is_add = true' v-if="has_add">添加车辆</el-button>
		</div>
		<div class="content-search">
			<!-- <el-form :inline="true"  class="demo-form-inline" style="margin-top: 20px;">
        <el-form-item label="企业名称">
          <el-input  placeholder="企业名称"></el-input>
        </el-form-item>
         <el-form-item label="企业名称">
           <el-input  placeholder="企业名称"></el-input>
         </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form> -->
		</div>
		<div class="content-table content-table1">
			<el-table :data="tableData" @sort-change="orderList" show-header stripe style="width: 100%;">
				<el-table-column prop="licensePlateNumber" label="车牌号" width="100">
				</el-table-column>
				<el-table-column prop="vin" label="车架号" width="200">
				</el-table-column>
				<el-table-column prop="ownerName" label="产权人" width="100">
				</el-table-column>
				<el-table-column prop="status" label="状态" width="200">
					<template slot-scope="scope">
						<span v-if="scope.row.status == item.value" v-for='item in dict.status'>{{item.type}}</span>
					</template>

				</el-table-column>
				
				<!-- <el-table-column prop="model" label="型号" width="100">
				</el-table-column> -->
				<!-- <el-table-column prop="drivingLicenseNum" label="行驶证" width="200">
				</el-table-column> -->
				<!-- <el-table-column prop="ownerIdcard" label="车主身份证" width="200">
				</el-table-column> -->
				
				<el-table-column prop="ownerPhoneNum" label="车主手机号" width="120">
				</el-table-column>

				<el-table-column prop="vehicleType" label="车辆类型" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.vehicleType == item.value" v-for='item in dict.vehicleType'>{{item.type}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="switchNum" label="换电次数" width="100">
				</el-table-column>
				<!-- <el-table-column prop="engineCode" label="发动机号" width="200">
				</el-table-column>
				<el-table-column prop="manufacturer" label="生产厂家" width="200">
				</el-table-column>
				<el-table-column prop="initBatteryCode" label="随车电池包号" width="200">
				</el-table-column>
				<el-table-column prop="clerkUserId" label="登录人id" width="100">
				</el-table-column>
				<el-table-column prop="clerkUserName" label="登录人姓名" width="100">
				</el-table-column>
				<el-table-column prop="clerkDate" label="创建时间" width="160">
				</el-table-column>
				<el-table-column prop="auditUserId" label="审核人id" width="100">
				</el-table-column>
				<el-table-column prop="auditUserName" label="审核人姓名" width="100">
				</el-table-column>
				<el-table-column prop="auditDate" label="审核时间" width="160">
				</el-table-column> -->

				<el-table-column prop="licensePlateType" label="车牌类型" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.licensePlateType == item.value" v-for='item in dict.licensePlateType'>{{item.type}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="property" label="使用性质" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.property == 0">运营</span>
						<span v-if="scope.row.property == 1">非运营</span>
					</template>
				</el-table-column>
				<el-table-column prop="propertyRightCode" label="产权证书号" width="200">
				</el-table-column>
				<!-- <el-table-column prop="ownerType" label="产权人类型" width="100">
				</el-table-column> -->
				<<!-- el-table-column prop="contactsName" label="联系人id" width="100">
				</el-table-column> -->
				<el-table-column prop="contactsPhoneNum" label="联系人手机" width="100">
				</el-table-column>
				<!-- <el-table-column prop="salesInfoUserId" label="使用信息录入人id" width="150">
				</el-table-column> -->
				<!-- <el-table-column prop="salesInfoUserName" label="使用信息录入人姓名" width="150">
				</el-table-column>
				<el-table-column prop="salesInfoDate" label="使用信息录入时间" width="160">
				</el-table-column>
				<el-table-column prop="salesInfoAuditUserId" label="使用信息审核人id" width="150">
				</el-table-column>
				<el-table-column prop="salesInfoAuditUserName" label="使用信息审核人姓名" width="150">
				</el-table-column>
				<el-table-column prop="salesInfoAuditDate" label="使用信息审核时间" width="160">
				</el-table-column> -->
				<el-table-column fixed="right" label="查看" width="100">
					<template slot-scope="scope">
						<template v-if='has_edit'>
							<el-button @click="handleClick(scope.row,1)" type="text" size="small">查看详情</el-button>
						</template>
						<!-- <el-button type="text" size="small"><i class="el-icon-delete"></i></el-button> -->
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<template v-if='has_edit'>
							<el-button v-if="scope.row.status == '1'" @click="handleClick(scope.row,2)" type="text" size="small"><i class="el-icon-edit"></i></el-button>
						</template>
						<!-- <el-button type="text" size="small"><i class="el-icon-delete"></i></el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total=total>
			</el-pagination>
		</div>
		<template v-if="is_add">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CarAdd @saveAdd='saveAdd'></CarAdd>
			</div>
		</template>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CarEdit @saveEdit='saveEdit'  :flag='flag' :id='id' :status='status'></CarEdit>
			</div>
		</template>
		<template v-if="is_history">
			<div class="all-screen"></div>
			<div class='history-box'>
				<CarHistory @saveHistory='saveHistory' :flag='flag' :id='id' :status='status'></CarHistory>
			</div>
		</template>
	</div>
</template>

<script>
	import CarAdd from '@/components/car/CarAdd.vue'
	import CarEdit from '@/components/car/CarEdit.vue'
	import CarHistory from '@/components/car/CarHistory.vue'
	import Global from '@/components/Global.vue'
	export default {
		components: {
			CarAdd: CarAdd,
			CarEdit: CarEdit,
			CarHistory:CarHistory,
		},
		props:['power'],
		data() {
			return {
				flag:0,
				id: 'id',
				status: '',
				is_add: false,
				is_edit: false,
				is_history:false,
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				dict: '',
				has_add:false,
				has_edit:false,
				has_del:false
			}
		},
		mounted() {
			this.check_power();
			console.log(this.power);
			this.get_list();
			this.get_dict();
		},
		methods: {
			orderList(column, prop, order){
				console.log(column);
			},
			check_power(){
				var self = this;
				this.power.forEach(function(element) {
					if(element.permissionName.indexOf("入库") != -1 )self.has_add = true;
					if(element.permissionName.indexOf("编辑") != -1 )self.has_edit = true;
					if(element.permissionName.indexOf("删除") != -1 )self.has_del = true;
				});
			},
			get_dict() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
				  .then(function (res) {
					  if(res != '')
						self.dict = res.data;
				  })
			},
			get_list() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'vehicle/vehicle/vehicleList', {
						"limit": this.limit + "",
						"page": this.page + "",
						"paginationFlag": true
					})
				  .then(function (res) {
					  if(res != ''){
						 self.tableData = res.data.list;
						 self.total = res.data.totalCount;
						 self.page = res.data.currPage;
					  }
						
				  })
				
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			saveAdd(type) {
				if (type == 2) {
					this.get_list();
				}
				this.is_add = false;
			},
			
			saveHistory(){
				this.is_history = false;
			},
			saveEdit(type) {
				if (type == 2) {
					this.get_list();
				}else if(type == 3){
					this.is_history = true;
				}
				this.is_edit = false;
			},
			editCompany() {
				this.is_edit = true;
			},
			handleClick(row,flag) {
				console.log(row.id);
				this.id = row.id;
				this.flag = flag;
				this.status = row.status;
				this.is_edit = true;
				
			}
		},


	}
	import '@/assets/css/common.css'
</script>
